<template>
  <div>
    <!-- 样本基本参数卡片视图区域 -->
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="4">
          编号:
          <el-input style="width: 100px" size="mini" v-model="queryInfo.number"></el-input>
        </el-col>
        <el-col :span="4">
          牌号:
          <el-input style="width: 100px" size="mini" v-model="queryInfo.mark"></el-input>
        </el-col>
        <el-col :span="4">
          供应商:
          <el-input style="width: 100px" size="mini" v-model="queryInfo.supplier"></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="mini" @click="loadData">查询</el-button>
        </el-col>
      </el-row>
      <el-row style="margin: 10px 0 10px">
        <el-col :span="2">
          <el-button type="primary" size="mini" @click="addParameterVisible = true"><i class="el-icon-plus"></i>添加</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" size="mini" @click="showImport"><i class="el-icon-arrow-right"></i>导入</el-button>
        </el-col>
      </el-row>
      <el-table :data="parameterList" border height="600px" style="margin: 10px 0 10px">
        <el-table-column type="index"></el-table-column>
        <el-table-column align="center" label="数据类型">导电性能</el-table-column>
        <el-table-column align="center" label="牌号" prop="grade"></el-table-column>
        <el-table-column align="center" label="样品规格">
          <template slot-scope="scope">
            <el-button type="text" @click="showSizeDiaVisible(scope.row.specification)">{{ scope.row.specification }}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="产地" prop="country"></el-table-column>
        <el-table-column align="center" label="生产商" prop="manufacturer" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="录入时间" prop="inDate"></el-table-column>
        <!-- <el-table-column align="center" label="样品别名">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-s-tools" @click="showAlias(scope.row.grade)"> </el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="化学成分">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-s-tools" @click="showChemical(scope.row.grade)"> </el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="样品标签">
          <template>
            <el-button type="text" icon="el-icon-s-tools" @click="tagDiaVisible = true"> </el-button>
          </template>
        </el-table-column> -->
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="showEditParameter(scope.row)"> </el-button>
            <el-button type="text" icon="el-icon-delete" @click="showDel(scope.row.id, 3)"> </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[10, 20]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </el-card>
    <!-- 添加样本信息 -->
    <el-dialog title="编辑样品信息" :visible.sync="addParameterVisible" width="70%">
      <el-form :inline="true">
        <el-form-item label="牌号:" label-width="170px">
          <el-input v-model="parameter.grade"></el-input>
        </el-form-item>
        <el-form-item label="牌号:" label-width="170px">
          <el-input v-model="parameter.parameterId"></el-input>
        </el-form-item>
        <el-form-item label="国别:" label-width="170px">
          <el-input v-model="parameter.country"></el-input>
        </el-form-item>
        <el-form-item label="生产商:" label-width="170px">
          <el-select v-model="parameter.manufacturer" placeholder="请选择" style="width: 191px">
            <el-option v-for="item in supplierList" :key="item.producer" :label="item.producer" :value="item.producer"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="执行标准:" label-width="170px">
          <el-select v-model="parameter.standard" placeholder="请选择" style="width: 191px">
            <el-option v-for="item in standardList" :key="item.rule_number" :label="item.rule_number" :value="item.rule_number"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标称密度:" label-width="170px">
          <el-input v-model="parameter.nominalDensity"></el-input>
        </el-form-item>
        <el-form-item label="样品规格:" label-width="170px">
          <el-select v-model="parameter.specification" placeholder="请选择" style="width: 191px">
            <el-option v-for="item in sizeList" :key="item.name" :label="item.name" :value="item.name"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电导率:" label-width="170px">
          <el-input v-model="parameter.specificConductance"></el-input>
        </el-form-item>
        <el-form-item label="热导率:" label-width="170px">
          <el-input v-model="parameter.heatConductivity"></el-input>
        </el-form-item>
        <el-form-item label="屈服强度:" label-width="170px">
          <el-input v-model="parameter.yieldStrength"></el-input>
        </el-form-item>
        <el-form-item label="入库日期:" label-width="170px">
          <el-input v-model="parameter.inDate"></el-input>
        </el-form-item>
        <el-form-item label="样品柜编号:" label-width="170px">
          <el-input v-model="parameter.cabinetNumber"></el-input>
        </el-form-item>
        <el-form-item label="项目组:" label-width="170px">
          <el-input v-model="parameter.projuctGroup"></el-input>
        </el-form-item>
        <el-form-item label="用途:" label-width="170px">
          <el-input v-model="parameter.sampleProducer"></el-input>
        </el-form-item>
        <el-form-item label="备注:" label-width="170px">
          <el-input v-model="parameter.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addParameterVisible = false">取 消</el-button>
        <el-button type="primary" @click="addParameter">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 样品别名编辑对话框 -->
    <el-dialog title="设置别名信息" :visible.sync="aliasDiaVisible" width="50%">
      <el-button type="primary" @click="addaliasDiaVisible = true">新增</el-button>
      <el-table :data="aliasList">
        <el-table-column type="index"></el-table-column>
        <el-table-column align="center" label="国别" prop="country"></el-table-column>
        <el-table-column align="center" label="别名" prop="alias"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="showedit(scope.row)"> </el-button>
            <el-button type="text" icon="el-icon-delete" @click="showDel(scope.row.id, 1)"> </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 添加别名对话框 -->
    <el-dialog title="添加别名信息" :visible.sync="addaliasDiaVisible" width="40%">
      <el-form>
        <el-form-item label="国别:" label-width="140px">
          <el-input v-model="addaliasList.country" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="别名:" label-width="140px">
          <el-input v-model="addaliasList.alias" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addaliasDiaVisible = false">取 消</el-button>
        <el-button type="primary" @click="addalias()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改别名对话框 -->
    <el-dialog title="编辑别名信息" :visible.sync="editAliasDiaVisible" width="40%">
      <el-form>
        <el-form-item label="国别:" label-width="140px">
          <el-input v-model="editaliasList.country" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="别名:" label-width="140px">
          <el-input v-model="editaliasList.alias" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editAliasDiaVisible = false">取 消</el-button>
        <el-button type="primary" @click="editalias()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 化学成分编辑对话框 -->
    <el-dialog title="设置化学成分" :visible.sync="chemicalDiaVisible" width="50%">
      <el-button type="primary" @click="addChemDiaVisible = true">新增</el-button>
      <el-table :data="chemList">
        <el-table-column type="index"></el-table-column>
        <el-table-column align="center" label="化学成分" prop="chemicalFormula"></el-table-column>
        <el-table-column align="center" label="范围" prop="numberRange"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="showChemedit(scope.row)"> </el-button>
            <el-button type="text" icon="el-icon-delete" @click="showDel(scope.row.id, 2)"> </el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="chemicalDiaVisible = false">取 消</el-button>
        <el-button type="primary" @click="chemicalDiaVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加化学成分对话框 -->
    <el-dialog title="添加化学成分信息" :visible.sync="addChemDiaVisible" width="40%">
      <el-form>
        <el-form-item label="化学成分:" label-width="140px">
          <el-input v-model="addchem.chemicalFormula" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="范围:" label-width="140px">
          <el-input v-model="addchem.numberRange" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addChemDiaVisible = false">取 消</el-button>
        <el-button type="primary" @click="addChemical">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改化学成分对话框 -->
    <el-dialog title="修改化学成分信息" :visible.sync="editChemDiaVisible" width="40%">
      <el-form>
        <el-form-item label="化学成分:" label-width="140px">
          <el-input v-model="editchemList.chemicalFormula" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="范围:" label-width="140px">
          <el-input v-model="editchemList.numberRange" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editChemDiaVisible = false">取 消</el-button>
        <el-button type="primary" @click="editchem()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 样本标签编辑对话框 -->
    <el-dialog title="设置对应标签" :visible.sync="tagDiaVisible" width="50%">
      <el-table :data="tagList">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index"></el-table-column>
        <el-table-column align="center" label="数据类型" prop="tagName"></el-table-column>
        <el-table-column align="center" label="编号" prop="tagType"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tagDiaVisible = false">取 消</el-button>
        <el-button type="primary" @click="tagDiaVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除提示对话框 -->
    <el-dialog title="提示" :visible.sync="delDiaVisible" width="50%">
      <span style="font-size: 20px; display: inline-block; align: center">确定删除此数据吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDiaVisible = false">取 消</el-button>
        <el-button type="primary" @click="del()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 导入按钮 -->
    <el-dialog title="提示" :visible.sync="importTag" width="60%">
      <div style="font-size: 20px; margin-left: 40px">请下载导入模板进行导入</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="margin-right: 20px" @click="exportData">下载模板</el-button>
        <a-upload name="file" :action="uploadUrl" accept=".xls,.xlsx" :data="paramData" :multiple="true" @change="handleChange" :showUploadList="false">
          <el-button type="primary">已有模板，立即导入</el-button>
        </a-upload>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paramData: {
        name: '2'
      },
      importTag: false,
      uploadUrl: 'http://59.172.104.174:30669/admin/uploadLessonFile',
      grade: '',
      sizeList: [],
      supplierList: [],
      standardList: [],
      //添加化学成分
      addchem: {
        id: '',
        mark: '',
        numberRange: '',
        chemicalFormula: ''
      },
      editchemList: {
        id: '',
        mark: '',
        numberRange: '',
        chemicalFormula: ''
      },
      addChemDiaVisible: false,
      //添加别名
      addaliasList: {
        id: '',
        country: '',
        alias: '',
        mark: ''
      },
      editaliasList: {
        id: '',
        country: '',
        alias: '',
        mark: ''
      },
      editAliasDiaVisible: false,
      addaliasDiaVisible: false,
      //添加样本
      parameter: {
        parameterId: '',
        id: '',
        grade: '',
        country: '',
        manufacturer: '',
        standard: '',
        nominalDensity: '',
        specification: '',
        specificConductance: '',
        heatConductivity: '',
        yieldStrength: '',
        inDate: '',
        cabinetNumber: '',
        projuctGroup: '',
        sampleProducer: '',
        remarks: ''
      },
      tagList: [
        { id: 1, tagName: '高频电工钢', tagType: '材料标签' },
        { id: 2, tagName: '无底层', tagType: '材料标签' },
        { id: 3, tagName: '通用系列', tagType: '材料标签' },
        { id: 4, tagName: '高频电工钢', tagType: '材料标签' },
        { id: 5, tagName: '非晶', tagType: '材料标签' },
        { id: 6, tagName: '超高磁感', tagType: '材料标签' },
        { id: 7, tagName: '高饱和型', tagType: '材料标签' },
        { id: 8, tagName: '去应力退火系列', tagType: '材料标签' },
        { id: 9, tagName: '低噪声', tagType: '材料标签' },
        { id: 10, tagName: '细化磁畴', tagType: '材料标签' },
        { id: 11, tagName: '新能源汽车系列', tagType: '材料标签' },
        { id: 12, tagName: '高磁感型', tagType: '材料标签' },
        { id: 13, tagName: '高效系列', tagType: '材料标签' },
        { id: 14, tagName: '纳米晶', tagType: '材料标签' },
        { id: 15, tagName: '取向电工钢', tagType: '材料标签' },
        { id: 16, tagName: '无取向电工钢', tagType: '材料标签' },
        { id: 17, tagName: '冷轧', tagType: '材料标签' },
        { id: 18, tagName: '低铁损', tagType: '材料标签' },
        { id: 19, tagName: '热轧', tagType: '材料标签' },
        { id: 20, tagName: '高强度电工钢', tagType: '材料标签' },
        { id: 21, tagName: '高硅电工钢', tagType: '材料标签' }
      ],
      delItemId: 0,
      flag: 0,
      editChemDiaVisible: false,
      addParameterVisible: false,
      SizeDiaVisible1: false,
      SizeDiaVisible2: false,
      aliasDiaVisible: false,
      chemicalDiaVisible: false,
      tagDiaVisible: false,
      delDiaVisible: false,
      total: 10,
      chemList: [
        {
          chemComponents: 'C',
          range: '0.1-0.3'
        }
      ],
      sizeFrom: {
        id: '',
        type: '',
        productId: '',
        diameter: '',
        mass: '',
        cd: '',
        ab: '',
        length: '',
        width: '',
        height: '',
        area: '',
        massDensity: '',
        volume: '',
        remarks: ''
      },
      queryInfo: {
        // number: '',
        // mark: '',
        // supplier: '',
        pageNum: 1,
        pageSize: 10
      },
      //所有数据列表
      parameterList: [],
      //别名列表
      aliasList: [],
      delType: 0 //标记删除哪一个
    }
  },
  created() {
    this.loadData()
    //this.getSupplier()//获取供应商
    //this.getCountry()//获取国家
    //this.getSize()//获取规格型号
    //this.getStandard()//获取执行标准
  },
  methods: {
    handleChange(info) {
      if (info.file.status === 'done') {
        if (info.file.response.code == '201') {
          this.$message.success('重新上传文件成功！')
        } else if (info.file.response.code == '200') {
          this.$message.success('上传文件成功！')
        }
      }
    },
    //模板导出按钮
    exportData() {
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: `/admin/downLoadLessonFile?name=牌号标签`,
        methods: 'GET',
        responseType: 'blob'
      }).then(res => {
        const blob = new Blob([res.data])
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.style.display = 'none'
        link.download = `牌号标签.xlsx`
        link.href = url
        link.click()
      })
    },
    showImport() {
      this.importTag = true
    },
    showChemedit(row) {
      this.editChemDiaVisible = true
      this.editchemList.id = row.id
      this.editchemList.mark = this.addchem.mark
      this.editchemList.numberRange = row.numberRange
      this.editchemList.chemicalFormula = row.chemicalFormula
    },
    showedit(row) {
      this.editAliasDiaVisible = true
      this.editaliasList.id = row.id
      this.editaliasList.country = row.country
      this.editaliasList.alias = row.alias
      this.editaliasList.mark = row.mark
    },
    editalias() {
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: '/basicsMarks/updateMark',
        method: 'POST',
        data: this.editaliasList
      }).then(() => {
        this.editAliasDiaVisible = false
        this.showAlias(this.grade)
      })
    },
    addalias() {
      this.addaliasList.mark = this.grade
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: '/basicsMarks/addMark',
        method: 'POST',
        data: this.addaliasList
      }).then(() => {
        this.addaliasDiaVisible = false
        this.showAlias(this.grade)
      })
    },
    showAlias(grade) {
      this.grade = grade
      this.aliasDiaVisible = true
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: `/basicsMarks/getMarksByMark?mark=${grade}`,
        methods: 'GET'
      }).then(res => {
        this.aliasList = res.data.result
      })
    },
    editchem() {
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: '/basicsChemicalComponent/updateChemical',
        method: 'POST',
        data: this.editchemList
      }).then(() => {
        this.editChemDiaVisible = false
        this.showChemical(this.editchemList.mark)
      })
    },
    addChemical() {
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: `/basicsChemicalComponent/addChemical`,
        method: 'POST',
        data: this.addchem
      }).then(res => {
        if (res.data.code === 200) {
          this.$message.success('添加成功！！')
          this.addChemDiaVisible = false
          this.showChemical(this.addchem.mark)
        }
      })
    },
    showChemical(mark) {
      this.addchem.mark = mark
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: `/basicsChemicalComponent/getChemical?mark=${mark}`,
        method: 'GET'
      }).then(res => {
        this.chemList = res.data.result
        this.chemicalDiaVisible = true
      })
    },
    showEditParameter(row) {
      this.addParameterVisible = true
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: `/eleParameter/selectParameterById?id=${row.id}`,
        methods: 'GET'
      }).then(res => {
        this.parameter = res.data.result
      })
    },
    //新增和编辑的请求
    addParameter() {
      this.addParameterVisible = false
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: '/eleParameter/addOrUpdateParameter',
        method: 'POST',
        params: this.parameter
      }).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.$$message.success('操作成功！！！')
        }
      })
    },
    getSize() {
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: '/basicsSpecificationName/selectSpecificationName?dataNum=1',
        method: 'GET'
      }).then(res => {
        this.sizeList = res.data.result
        console.log(this.sizeList)
      })
    },
    getCountry() {},
    getSupplier() {
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: '/basicsProducerInformation/getProducerName',
        method: 'GET'
      }).then(res => {
        this.supplierList = res.data.result
        console.log(this.supplierList)
      })
    },
    getStandard() {
      this.axios({
        baseURL: 'http://59.172.104.174:31770',
        url: '/basicsExecutionStandard/selectExecution',
        method: 'POST'
      }).then(res => {
        this.standardList = res.data.result
        console.log(this.standardList)
      })
    },
    //分页控制
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
    },
    //控制不同的样本规格显示不同的对话框
    showSizeDiaVisible(name) {
      this.SizeDiaVisible = true
      if (name === '圆柱') {
        this.SizeDiaVisible1 = true
      } else if (name === '方柱') {
        this.SizeDiaVisible2 = true
      }
    },
    //控制删除对话框
    showDel(id, type1) {
      this.delType = type1
      this.delItemId = id
      this.delDiaVisible = true
    },
    //发起真正的删除操作
    del() {
      if (this.delType === 1) {
        //删别名
        this.axios({
          baseURL: 'http://59.172.104.174:31770',
          url: `/basicsMarks/deleteMarkById?id=${this.delItemId}`,
          methods: 'GET'
        }).then(res => {
          this.delDiaVisible = false
          this.showAlias(this.grade)
        })
      } else if (this.delType === 2) {
        //删化学成分
        this.axios({
          baseURL: 'http://59.172.104.174:31770',
          url: `/basicsChemicalComponent/deleteChemical?id=${this.delItemId}`,
          methods: 'GET'
        }).then(res => {
          if (res.data.code == 200) {
            this.$message.success('删除化学成分成功！！！')
            this.showChemical(this.addchem.mark)
            this.delDiaVisible = false
          }
        })
      } else if (this.delType === 3) {
        //删一整行
        this.axios({
          baseURL: 'http://59.172.104.174:30669',
          url: `/eleParameter/deleteParameter?id=${this.delItemId}`,
          methods: 'GET'
        }).then(res => {
          if (res.data.code == 200) {
            this.$message.success('删除成功！！！')
            this.loadData()
          }
        })
      }
    },
    loadData() {
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: '/eleParameter/selectParameter',
        method: 'POST',
        data: this.queryInfo
      }).then(res => {
        this.parameterList = res.data.result.records
        this.total = res.data.result.total
      })
    }
  }
}
</script>

<style scoped></style>
